<template>
  <div class="app-container">
    <el-row :gutter="20" class="mb8" v-if="false">
      <el-col :span="16">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
        >新增公告</el-button>
      </el-col>
      <el-col :span="8" class="text-right">
        <el-input
          v-model="queryParams.title"
          placeholder="搜索公告标题"
          style="width: 200px"
          clearable
          @keyup.enter.native="getList"
        />
        <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="noticeList" border @selection-change="selectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" prop="id" width="80" align="center" />
      <el-table-column label="标题" prop="title" min-width="150" />
      <el-table-column label="内容" prop="content" min-width="200">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div style="max-width: 300px">{{ scope.row.content }}</div>
            <div slot="reference">{{ scope.row.content | ellipsis }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="发布人" prop="publisher" width="120" align="center" />
      <el-table-column label="发布时间" prop="publishTime" width="160" align="center">
        <template slot-scope="scope">
          {{ parseTime(scope.row.publishTime) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '1' ? 'success' : 'info'">
            {{ scope.row.status === '1' ? '已发布' : '草稿' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
          <el-button
            v-if="scope.row.status !== '1'"
            size="mini"
            type="text"
            icon="el-icon-s-promotion"
            @click="handlePublish(scope.row)"
          >发布</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listNotice, delNotice, publishNotice, delNotices } from '@/api/notice'
import { parseTime } from '@/utils/ruoyi'
import Pagination from '@/components/Pagination'

export default {
  name: 'NoticeTable',
  components: { Pagination },
  props: {
    queryParams: {
      type: Object,
      default: () => ({
        pageNum: 1,
        pageSize: 10,
        title: undefined,
        status: undefined
      })
    }
  },
  data() {
    return {
      loading: false,
      noticeList: [],
      total: 0
    }
  },
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 50) {
        return value.slice(0, 50) + '...'
      }
      return value
    }
  },
  created() {
    this.getList()
  },
  methods: {
    parseTime,
    getSenderName(row) {
      try {
        const extra = JSON.parse(row.extra || '{}');
        return extra.senderName || '管理员';
      } catch (e) {
        return '管理员';
      }
    },
    getList() {
      this.loading = true
      listNotice(this.queryParams).then(response => {
        this.noticeList = response.rows.map(row => ({
          ...row,
          publisher: this.getSenderName(row)
        }))
        this.total = response.total
        this.loading = false
      })
    },
    selectionChange(selection) {
      this.$emit('selection-change', selection)
    },
    handleAdd() {
      this.$router.push('/notice/create')
    },
    handleEdit(row) {
      this.$router.push(`/notice/edit/${row.id}`)
    },
    handleDelete(row) {
      this.$confirm('确认删除该公告吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delNotice(row.id).then(() => {
          this.$modal.msgSuccess('删除成功')
          this.getList()
        })
      })
    },
    handlePublish(row) {
      this.$confirm('确认发布该公告吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        publishNotice(row.id).then(() => {
          this.$modal.msgSuccess('发布成功')
          this.getList()
        })
      })
    },
    // 批量删除
    batchDelete(ids) {
      this.$confirm('确认批量删除选中的公告吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delNotices(ids.join(',')).then(() => {
          this.$modal.msgSuccess('批量删除成功')
          this.getList()
        })
      })
    }
  }
}
</script>
